<template>
	<view class="warp">
		<view class="form_box">
			<!-- 顶部背景图片-->
			<view class="login__bg login__bg--top">
			</view>
			<view class="text">泰尔认证（TLC）学习平台</view>
			<view class="login__bg login__bg--top">
				<image class="rocket rocket-sussuspension" src="/static/login_top3.png" mode="widthFix"></image>
			</view>

			<!-- <view class="face">
				<image :src="IMG_URL+'avatar.png'" mode="aspectFit"></image>
			</view> -->
			<view class="login_box">
				<view class="i_input">
					<uv-input placeholder="用户名" border="bottom" v-model="params.account" prefixIcon="account-fill"
						prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
				</view>
				<view class="i_input">
					<uv-input placeholder="密码" type="password" border="bottom" v-model="params.password"
						prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
				</view>
				<view class="i_input_valid">
					<view class="captcha_box">
						<uv-input placeholder="验证码" type="text" border="bottom" v-model="params.code" 
							prefixIcon="eye-fill" prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
						<image :src="picPath" mode="scaleToFill" @click="captcha()"></image>
					</view>
					</view>
				<view class="i_button">
					<uv-button text="登录" type="primary" @click="login()"></uv-button>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="i_button" style="margin-top: 30rpx;">
					<uv-button text="授权登录" type="primary" iconSize="30px" iconColor="#ffffff" color="#72c053" @click="wx_login()"></uv-button>
				</view>
				<!-- #endif -->
				<!-- <view class="i_text">
					<view class="i_item" @click="scan" :style="isWeb ? '' : 'display:none'">
						企业微信扫码登录
					</view>
					<view class="i_item" @click="captcha">
						注册账户
					</view>
				</view> -->

			</view>
		</view>

		<uv-popup ref="popup">
			<view style="height: 430px;text-align: center;padding: 20px 0;">
				<view id="ww_login"></view>
				<iframe style="height: 380px;width: 290px;" :src="`https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=${config.qy_wechat_appid}&agentid=${config.qy_wechat_agentid}&redirect_uri=${config.qy_wechat_redirect_uri}&scope=snsapi_privateinfo&state=STATE`" frameborder="0"></iframe>
			</view>
		</uv-popup>
		
		<!-- 修改密码盒子 start -->
		<uv-popup ref="register_popup" mode="center" closeable :closeOnClickOverlay="false" round="5">
			<view class="register_box">
				<view class="title">
					用户注册
				</view>
				<view class="i_input">
					<view class="i_text">
						昵称
					</view>
					<uv-input type="text" border="bottom" v-model="reg_params.nickname" placeholder="对外显示名称"></uv-input>
				</view>
				<view class="i_input">
					<view class="i_text">
						用户名
					</view>
					<uv-input type="text" border="bottom" v-model="reg_params.username" placeholder="登录使用"></uv-input>
				</view>
				<view class="i_input">
					<view class="i_text">
						密码
					</view>
					<uv-input type="password" border="bottom" v-model="reg_params.password" placeholder="请输入密码"></uv-input>
				</view>
				<view class="i_input">
					<view class="i_text">
						确认密码
					</view>
					<uv-input type="password" border="bottom" v-model="reg_params.password2" placeholder="再次输入密码"></uv-input>
				</view>
				<view class="i_input">
					<view class="i_text">
						验证码
					</view>
					<view class="captcha_box">
						<uv-input type="text" border="bottom" v-model="reg_params.code" placeholder="请输入验证码"></uv-input>
						<image :src="picPath" mode="scaleToFill" @click="captcha()"></image>
					</view>
				</view>
				<view class="i_button">
					<uv-button text="注册" type="primary" @click="register()"></uv-button>
				</view>
			</view>
		</uv-popup>
		<!-- 修改密码盒子 end -->
		
		<!-- #ifdef MP-WEIXIN -->
		<uv-modal ref="miniapp_modal" title="信息" cancelText="取消" buttonReverse showCancelButton confirmText="登录" @confirm="wx_login">
			<view class="slot-content">
				<view class="wxwork_modal_box">
					<uv-icon class="icon" name="question-circle" size="60rpx" color="#f4c012"></uv-icon>
					<rich-text nodes="检测到你在小程序中浏览,是否直接使用微信登录？"></rich-text>
				</view>
			</view>
		</uv-modal>
		<!-- #endif -->
		<!-- #ifdef WEB -->
		<uv-modal ref="wxwork_modal" title="信息" cancelText="取消" buttonReverse showCancelButton confirmText="登录" @confirm="wxwork_confirm">
			<view class="slot-content">
				<view class="wxwork_modal_box">
					<uv-icon class="icon" name="question-circle" size="60rpx" color="#f4c012"></uv-icon>
					<rich-text nodes="检测到你在企业微信中浏览,是否直接使用企业微信登录？"></rich-text>
				</view>
			</view>
		</uv-modal>
		<!-- #endif -->
	</view>
</template>

<script>
	import * as ww from '@wecom/jssdk'
	export default {
		computed: {},
		onLoad(options) {
			console.log(options)
			// #ifdef WEB
			this.isWeb = true
			let code = this.getQueryString('code')
			if (code) {
				this.code = code
				let url = location.href.replace('?code='+code,'')
				url = url.replace('&appid=' + uni.getStorageSync('config').qy_wechat_appid,'')
				url = url.replace('&state=','')
				console.log('url',url)
				location.href = url + '?code=' + code 
			}
			if(options.code){
				this.code = options.code
				this.scanLogin()
			}
			// #endif
			this.getConfig();
			
			this.captcha();
		},
		data() {
			return {
				isWeb: false,
				params: {
					account: "",
					password: "",
					captchaId: '',
					code: ''
				},
				config: {},
				code: null,
				IMG_URL: this.$IMG_URL,
				reg_params: {
					username: '',
					nickname: '',
					password: '',
					password2: '',
					captchaId: '',
					code: '',
				},
				picPath: '',
			}
		},
		methods: {
			async wx_login() {
				uni.showLoading({ title: '登录中...' });
				let that = this;
				try {
					let code = await that.getMpCode();
					console.log('code',code)
					// 请求
					const res = await this.$myRequest({
						url: "user/mp_mini_login",
						type: "post",
						data: {code:code},
					});
					uni.hideLoading();
					// 判断
					if (res.code === 1) {
						this.loginJump(res.data)
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				} catch (e) {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: e
					})
				}
			},
			// 获取登录Code
			async getMpCode() {
				return new Promise((resolve, reject) => {
					uni.login({
						success: function(res) {
							if (res.code) {
								resolve(res.code);
							} else {
								//login成功，但是没有取到code
								reject('未取得code');
							}
						},
						fail: function(res) {
							reject('用户授权失败wx.login');
						}
					});
				});
			},
			async captcha() {
				const res = await this.$myRequest({
					url: "auth/captcha",
					type: "post",
					data: {},
				});
				if (res.code) {
					this.picPath = res.picPath
					this.params.captchaId = res.captchaId
				}
			},
			scan() {
				this.$refs.popup.open('center');
			},
			async login() {
				const res = await this.$myRequest({
					url: "user/login",
					type: "post",
					data: this.params,
					showToast: 2,
				});
				if (res.code === 1) {
					this.loginJump(res.data.userinfo)
				}else if (res.code === 0) {
					// Refresh captcha if verification code error
					this.captcha();
				}
			},
			async getConfig() {
				const res = await this.$myRequest({
					url: "config/show",
					type: "post",
					data: {},
				});
				this.config = res.data
				uni.setStorageSync('config',res.data)
				// #ifdef H5
				// 企业微信登录
				let userAgentLower = navigator.userAgent.toLowerCase()
				if (userAgentLower.includes('wxwork') && !this.code) {
					console.log("当前用户代理表明是在使用微信企业版（WxWork）浏览器。");
					this.$refs.wxwork_modal.open()
				}
				// #endif
				// #ifdef MP-WEIXIN
				// 微信小程序登录
				this.$refs.miniapp_modal.open()
				// #endif
			},
			async scanLogin() {
				uni.showLoading({ title: '登录中...' });
				let that = this;
				try {
					const res = await this.$myRequest({
						url: "user/qy_wechat_login",
						type: "post",
						showToast: 1,
						data: {
							code: that.code
						},
					});
					uni.hideLoading();
					if(res.code){
						that.loginJump(res.data)
					}
				} catch (e) {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: e
					})
				}
			},
			loginJump(userinfo) {
				uni.setStorageSync('userInfo', userinfo)
				this.$store.commit('save_userInfo', userinfo)
				console.log('setStorageSync.userInfo',uni.getStorageSync('userInfo'))
				console.log('this.$store.getters.userInfo',this.$store.getters.userInfo)
				
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			async register() {
				const res = await this.$myRequest({
					url: "user/register",
					type: "post",
					showToast: 1,
					data: {...this.reg_params},
				});
				if(res.code){
					this.$refs.register_popup.close()
					uni.showToast({
						title: res.msg,
						icon:'success'
					})
					setTimeout(()=>{
						this.loginJump(res.data.userinfo)
					},500)
				} else {
					uni.showToast({
						title: res.msg,
						icon:'none'
					})
				}
			},
			wxwork_confirm() {
				console.log('this.config.wxwork_auth_url',this.config.wxwork_auth_url)
				location.href = this.config.wxwork_auth_url
			}
		}
	}
</script>

<style lang="scss">
	/* 悬浮 */
	.rocket-sussuspension {
		animation: suspension 3s ease-in-out infinite;
	}
	
	@keyframes suspension {
		0%,
		100% {
			transform: translate(0, 0);
		}
		50% {
			transform: translate(-0.8rem, 1rem);
		}
	}
	
	.warp {
		background-color: #F2F2F2;
		min-height: 100vh;
		max-width: 1600rpx;
		margin: auto;

		.form_box {
			position: relative;
			z-index: 1;
			background: #5677FC;
			height: 520rpx;
			
			/* 背景图片 start */
			.login__bg {
				z-index: -1;
				position: fixed;
				
				&.login__bg--top {
					top: 0;
					left: 0;
					right: 0;
					width: 100%;
			
					.bg {
						// width: 305rpx;
						width: 750rpx * 0.55;
						// will-change: transform;
						left: 50%;
						transform: translateX(-50%);
						top:  -30rpx;
					}
					.rocket {
						margin: 50rpx 28%;
						width: 400rpx;
						will-change: transform;
					}
				}
				
			
				&.login__bg--bottom {
					bottom: -10rpx;
					left: 0;
					right: 0;
					width: 100%;
					// height: 144px;
					margin-bottom: env(safe-area-inset-bottom);
		
					image {
						width: 750rpx;
						will-change: transform;
					}
				}
			}
			/* 背景图片 end */			
			.text {
				color: white;
				padding-top: 330rpx;
				text-align: center;
				font-size: 50rpx;
				font-weight: bold;
			}
			
			.face {
				display: flex;
				justify-content: center;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					border: 8rpx solid #efeff4;
				}
			}

			.login_box {
				padding: 40rpx;
				position: relative;
				background: white;
				margin: 30rpx 50rpx 0 50rpx;
				width: calc(100% - 100rpx);
				border-radius: 20rpx;

				.i_input {
					margin-top: 20rpx;
				}

				.i_button {
					margin-top: 60rpx;
				}
				
				.i_input_valid{
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					.i_text{
						margin-right: 20rpx;
						width: 120rpx;
						text-align: right;
						font-size: 26rpx;
					}
					
					.captcha_box{
						display: flex;
						align-items: center;
						image{
							width: 160rpx;
							height: 60rpx;
							border: 1px dashed #3c9cff;
							margin-left: 20rpx;
							cursor: pointer;
						}
					}
				}

				.i_text {
					margin-top: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;

					.i_item {
						border-right: 2px solid #979797;
						padding: 0 30rpx;
						margin-top: 20rpx;
						color: #3c9cff;
					}

					.i_item:last-child {
						border: none;
					}
				}
			}
			.mini_login_box{
				padding: 40rpx;
				
				.i_button {
					margin-top: 60rpx;
				}
			}
		}
		
		// 注册盒子
		.register_box{
			padding: 40rpx 40rpx 40rpx 40rpx;
			width: 80vw;
			.title{
				height: 60rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
			}
			.i_input{
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				.i_text{
					margin-right: 20rpx;
					width: 120rpx;
					text-align: right;
					font-size: 26rpx;
				}
				
				.captcha_box{
					display: flex;
					align-items: center;
					image{
						width: 160rpx;
						height: 60rpx;
						border: 1px dashed #3c9cff;
						margin-left: 20rpx;
						cursor: pointer;
					}
				}
			}
			.i_button{
				margin-top: 30rpx;
			}
		}
		// 企业微信弹窗盒子
		.wxwork_modal_box{
			display: flex;
			align-items: start;
			color: #333;
			.icon{
				margin-right: 10rpx;
			}
		}
	
	}
</style>